import { defineComponent } from "vue";
import style from "./index.module.less";
import TitleView from "../TitleView";
import Text from "../Text";
import LabelGroup from "../LabelGroup";
import RowView from "../RowView";
import icon1 from "./asset/icon1.png";
import icon2 from "./asset/icon2.png";
import { BrandDetailsProps } from "./types";
export default defineComponent({
  name: "",
  props: BrandDetailsProps,
  setup(_) {
    const data = [
      {
        img: icon1,
      },
      {
        img: icon2,
      },
    ];
    const right = () => {
      return (
        <RowView>
          {data.map((e) => {
            return <img src={e.img} class="ml-[10px] w-[17px] h-[17px]" />;
          })}
        </RowView>
      );
    };
    return () => {
      return (
        <div class="bg-white p-[10px] flex flex-col">
          <TitleView title={_.data.name} right={right} />
          <Text>{_.data.introduce}</Text>
          <LabelGroup
            childClass="!w-auto my-[6px]"
            data={[{ name: `${_.data.majorName}类别可使用`, type: "yellow" }]}
          />
          <RowView class="justify-between">
            <Text>{_.data.address}</Text>
            <Text>距离您{_.data.distance}km</Text>
          </RowView>
        </div>
      );
    };
  },
});
